<template>
  <div class="replaceCommon">
    <div class="fav">
      <ul class="packageTitle flexCenter">
        <li @click="checkActive(index)" :class="{ 'active': activeIndex == index }" v-for="(item, index) in commonPackage" :key="index">常用礼品包{{ index + 1 }}</li>
      </ul>
      <ul class="packageDetail" v-if="allArr.length > 0 && activeIndex != '-1' ">
        <li class="goodsItem" :class="{ 'errorItem': 0 }" v-for="(item, index) in JSON.parse(allArr[activeIndex].productDetail)" :key="index">
          <img :src="item.picList ? JSON.parse(item.picList)[0] : noImg" alt="商品主图">
          <span class="text" :title="item.productName">{{ item.productName }}</span>
          <span>{{ item.weight }}kg</span>
          <span>{{ item.price }}元/件</span>
          <span>{{ item.num }}件</span>
        </li>
        <li class="price">
          <div class="weight">
            <p>
              包裹重量
              <strong>{{ allArr[activeIndex].weight }}kg</strong>
            </p>
          </div>
          <div class="area">
            <p v-if="isFar.farNum > 0">
              偏远地区：(商品{{ allArr[activeIndex].productPrice }}元 + 运费{{ logisticPrice.farPrice }}元) * {{ isFar.farNum }} =
              <strong>{{ farTotal }}元</strong>
            </p>
            <p v-if="isFar.normalNum > 0">
              普通地区：(商品{{ allArr[activeIndex].productPrice }}元 + 运费{{ logisticPrice.normalPrice }}元) * {{ isFar.normalNum }} =
              <strong>{{ normalTotal }}元</strong>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'replaceCommon',
  props: {
    index: {
      type: Number
    },
    isFar: {
      type: Object
    }
  },
  data () {
    return {
      noImg: require('../../../assets/images/noContainer.svg'),
      isFirst: false,
      isAddpack: false,
      isEditpack: false,
      activeIndex: '-1',
      addsArr: [], // 添加的礼品包/标题礼品包(临时用礼品包)
      fixedArr: [], // 修改时的选中的礼品包对象
      oldSetId: '',
      replaceObj: { // 替换对象
        show: false,
        setId: '',
        oldSetId: '',
        isFarObj: ''
      }
    }
  },
  watch: {
    index (val) {
      if (val !== '') {
        this.activeIndex = val
        this.addsArr = []
      }
    },
    activeIndex: 'setIdChange'
  },
  computed: {
    logisticPrice: {
      get: function () {
        let weight = this.allArr[this.activeIndex].weight
        let priceObj = this.logisticList
        let farPrice = 0
        let normalPrice = 0
        if (weight > 0 && weight <= 0.5) {
          farPrice = priceObj.farFirstPrice
          normalPrice = priceObj.firstPrice
        } else if (weight > 0.5 && weight <= 1) {
          farPrice = priceObj.farMidllePrice
          normalPrice = priceObj.middlePrice
        } else {
          farPrice = (1 * priceObj.farMidllePrice + (Math.ceil(weight - 1)) * priceObj.farEndPrice)
          normalPrice = (1 * priceObj.middlePrice + (Math.ceil(weight - 1)) * priceObj.endPrice)
        }
        return {
          farPrice: farPrice.toFixed(2),
          normalPrice: normalPrice.toFixed(2)
        }
      },
      set: function (val) {
        return val
      }
    },
    farTotal () {
      let total = 0
      total = (((this.allArr[this.activeIndex].productPrice - 0) + (this.logisticPrice.farPrice - 0)) * this.isFar.farNum).toFixed(2)
      return total
    },
    normalTotal () {
      let total = 0
      total = (((this.allArr[this.activeIndex].productPrice - 0) + (this.logisticPrice.normalPrice - 0)) * this.isFar.normalNum).toFixed(2)
      return total
    },
    allArr: {
      get: function () {
        let arr = []
        let commonArr = this.commonPackage
        let addsArr = this.addsArr
        arr = commonArr.concat(addsArr)
        return arr
      },
      set: function (val) {
        return val
      }
    },
    ...mapGetters([
      'userInfo',
      'packages',
      'logisticList',
      'commonPackage',
      'addedPackage'
    ])
  },
  methods: {
    setIdChange () {
      if (this.activeIndex !== '-1') {
        let activeIndex = this.activeIndex
        let allArr = this.allArr
        let id = allArr[activeIndex].setId
        let money = (this.farTotal - 0) + (this.normalTotal - 0)
        this.$emit('setIdChange', [id, money, activeIndex])
      } else {
        this.$emit('setIdChange', ['', 0])
      }
    },
    checkActive (index) { // 选中的礼品包
      if (this.activeIndex === index) {
        this.activeIndex = '-1'
        this.$emit('setIdChange', ['', 0])
      } else {
        this.activeIndex = index
      }
    },
    getLogisticPrice () { // 获取物流价格列表
      this.$ajax.post('/api/seller/account/getSellerLogisticsPriceList', {
        sellerAccountId: this.userInfo.sellerAccountId
      }).then((data) => {
        if (data.data.code === '200') {
          let res = data.data.data
          this.setLogisticList(res[0])
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    getCommonList () { // 获取常用礼品包列表
      this.$ajax.post('/api/productSet/getCommonSetListBySellerAccountId', {
        sellerAccountId: this.userInfo.sellerAccountId
      }).then((data) => {
        if (data.data.code === '200') {
          let res = data.data.data
          this.setCommonPackage(res)
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    ...mapActions([
      'setAddedPackage',
      'setLogisticList',
      'setCommonPackage',
      'setPackages'
    ])
  },
  created () {
    if (this.logisticList.length === 0) {
      this.getLogisticPrice()
    }
    if (this.commonPackage.length === 0) {
      this.getCommonList()
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index.styl'
.replaceCommon
  .flexCenter
    justify-content center
  .packageTitle
    display flex
    li
      text-align center
      fontSize($fontSize, 32px, $fontColor-gray)
      padding 0 16px
      border 1px solid RGBA(68, 68, 68, 0.7)
      border-radius 4px
      margin-right 24px
      cursor pointer
    .active
      border-color $mainColor
      color $mainColor
      position relative
      &:after
        content ''
        position absolute
        width 18px
        height 18px
        background #F6F6F6
        border-top 1px solid #dddddd
        border-left 1px solid #dddddd
        transform rotate(45deg)
        bottom -41px
        left 0
        right 0
        margin 0 auto
  .packageDetail
    border 1px solid #dddddd
    background #F6F6F6
    padding-left 18px
    margin-top 30px
    li
      padding 12px 20px 12px 0
      border-bottom 1px solid #DDDDDD
    .goodsItem
      display flex
      justify-content space-between
      align-items center
      .text
        width 170px
        text-overflow ellipsis
        overflow hidden
        white-space nowrap
      img
        width 40px
        height 40px
      span
        fontSize($fontSize, 1, $fontColor)
    .errorItem
      span
        color $mainColor
    .price
      display flex
      justify-content space-between
      .weight
        width 150px
      .area
        flex 1
      p
        fontSize($fontSize, 30px, $fontColor)
        strong
          color $mainColor
    .operate
      position relative
      text-align right
      border none
      b
        margin-left 12px
      .setUseful
        position relative
        z-index 11
        border 1px dashed #ffffff
        color #ffffff
      .tips
        position absolute
        z-index 9
        top 30px
        right 0
        width 180px
        height 125px
        background url('../../../assets/images/tip.png') no-repeat
        background-size 100% 100%
        p
          position absolute
          top 0
          right 0
          bottom 0
          z-index 9
          left 0
          width 100px
          height 70px
          margin auto
          fontSize($fontSize, 26px, $fontColor-o)
        i
          position absolute
          z-index 9
          top 15px
          right 30px
          fontSize(20px, 1, $fontColor-o)
          cursor pointer
  .addBtn
    text-align center
    margin-top 30px
    margin-bottom 30px
  .addPackage
    position fixed
    top 0
    left 0
    overflow auto
    width 100%
    height 100%
    z-index 10
    background rgba(0, 0, 0, 0.4)
    .car
      position absolute
      top 0
      left 0
      right 0
      bottom 0
      margin auto
      padding 0 20px
      width 1000px
      height 700px
      background #ffffff
      h2
        display flex
        justify-content space-between
        align-items center
        padding 0 20px
        border-bottom 1px solid #EBEEF5
        line-height 50px
        height 50px
        span
          fontSize($fontSize-l, 1, $fontColor)
          font-weight bold
        i
          cursor pointer
          fontSize(28px, 1, $fontColor)
</style>
